<!--
 * @Descripttion: 
 * @version: 
 * @Author: hejin.gao
 * @Date: 2022-08-18 09:17:48
 * @LastEditors: hejin.gao
 * @LastEditTime: 2022-09-22 17:24:11
-->
<template>
  <div id="eye"></div>
</template>

<script>
export default {
  data() {
    this.eye_earth = null;
    this.eye = null;
    this.rectangle = null;
    return {
      lockView: false
    }
  },
  mounted() {
    this.initEarth();
  },
  methods: {
    initEarth() {
      let me = this;
      me.eye_earth = new Earth();
      me.eye = me.eye_earth.initMap("eye", {
        timeline: false, //底部的时间轴
        imageryProvider: new Cesium.MapboxStyleImageryProvider({
          url: "https://api.mapbox.com/styles/v1",
          layers: "MAPBOX",
          rectangle: Cesium.Rectangle.MAX_VALUE,
          username: 'gaohejin',
          styleId: 'cl7scr34e001i14qtflrx8lsu', // ckn8pl2mi0m4m17o2kqx0ehyg cl7scr34e001i14qtflrx8lsu
          accessToken: 'pk.eyJ1IjoiZ2FvaGVqaW4iLCJhIjoiY2ttd3g3ZmlsMDMwaTJ2bnFoMXg0Y2l4ciJ9.f5nCN_W40PAvBtE4cht2nQ'
        })
      })

      me.handlerRender();
      viewer.camera.percentageChanged = 0.05;
      me.eye.camera.percentageChanged = 0.01;
      me.handleMasterViewChanged();
      viewer.camera.changed.addEventListener(me.handleMasterViewChanged);
    },
    handleMasterViewChanged() {
      let c = earth.mouseManager.cameraPosition();
      let h = 100;

      if(c.height >= 6400000 ) {
        this.lockView = true;
        h = 6400000;
      } else {
        this.lockView = c.height >= 2560000;
        h = c.height >= 2560000 ? c.height : c.height * 2.5;
      }
      
      let position = Cesium.Cartesian3.fromDegrees(c.longitude, c.latitude, h <= 100 ? 100 : h);
      this.eye.camera.setView({
        destination: position,
        orientation: {
          heading: viewer.camera.heading,
          pitch: Cesium.Math.toRadians(-90.00),
          roll: viewer.camera.roll
        }
      });
    },
    handlerRender() {
      let me = this;
      let scene = me.eye.scene;
      scene.globe.showGroundAtmosphere = false;
      scene.skyAtmosphere.show = false;
      scene.globe.enableLighting = false;
      scene.skyBox.show = false;
      scene.sun.show = false;

      // scene.backgroundColor = new Cesium.Color(250.0, 250.0, 250.0, 0.05);

      const control = scene.screenSpaceCameraController;
      control.enableRotate = false;
      control.enableTranslate = false;
      control.enableZoom = false;
      control.enableTilt = false;
      control.enableLook = false;

      // viewer.scene.camera.moveEnd.addEventListener(e => {})
      // viewer.scene.camera.moveStart.addEventListener(e => {})
      me.rectangle = me.eye.entities.add({
        rectangle: {
          coordinates: new Cesium.CallbackProperty(this._getViewRange),
          material: Cesium.Color.YELLOW.withAlpha(0.2)
        },
      });
    },

    _getViewRange() {
      if(this.lockView) { 
        this.rectangle.show = false;
        return; 
      }
      this.rectangle.show = true;
      const range = viewer.scene.camera.computeViewRectangle()
      const west = (range.west / Math.PI) * 180
      const east = (range.east / Math.PI) * 180
      const north = (range.north / Math.PI) * 180
      const south = (range.south / Math.PI) * 180
      return Cesium.Rectangle.fromDegrees(west, south, east, north);
    },
  },
  destroyed() {
    this.eye.entities.removeAll();
    viewer.scene.camera.moveStart.removeEventListener()
    viewer.scene.camera.moveEnd.removeEventListener()
    // this.eye_earth.destroy();
  }
};
</script>

<style lang="scss" scoped>
#eye {
  position: absolute;
  bottom: 32px;
  right: 10px;
  z-index: 999;
  width: 200px;
  height: 200px;
  overflow: hidden;
  border-radius: 50%;
  box-shadow: 0 0 10px #000;
}
</style>